<template>
	<form @submit="submit">
		<view class="card">
			<view style="font-weight: bold;">服务内容
				<text style="font-size: small;color: red;">(必填)</text>
			</view>
			<textarea required maxlength="200" minlength="4" style="display: block;width: auto;" v-model="post.remark" 
			placeholder="请输入服务内容,不超过200字,不少于4个汉字" placeholder-class="gst"/>
		</view>
		<view class="card">
			<view style="font-weight: bold;">添加现场照片</view>
			<mk-upload back="#F8F8F8" :column="3" :imgList="picUrls" @onChoose="chooseImg" @onDelete="deleteImg"></mk-upload>
		</view>
		<view style="margin-bottom: 100rpx;"></view>
		<view class="bottom horizontal">
			<button disabled v-if="post.remark.length<4 || picUrls.length==0" style="color: white;background-color: gray;" class="capsule scale">提交工单</button>
			<button v-else style="color: white;background-color: var(--color-ok);" class="capsule scale" @tap="submit">提交工单</button>
		</view>
	</form>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	import mkUpload from '@/components/mk-upload/mk-upload.vue'
	
	const app = getApp()
	
	export default {
		components:{
			hgCell, xflSelect, mkUpload, 
		},
		onLoad(opts) {
			this.post.workId = opts.id
			this.source = opts.source
		},
		data() {
			return {
				source: '',
				post:{
					source: '',		// 工单来源
					workId: '',  // 工单id
					remark: ""  ,// 服务内容或备注
					// 故障图片
					picUrls:[
						
					],
				},
				picUrls:[
					
				],
				uploaded: ''
			}
		},
		watch:{
			uploaded(newVal){
				if(newVal>=this.picUrls.length){
					// 已经上传完所有的图片，可以进行表单提交
					uni.request({
						header:{
							Authorization: 'Bearer ' + app.globalData.token,
						},
						url: app.globalData.domain + 'workOrder/commit',
						method: 'POST',
						data: {
							workId: this.post.workId,
							remark: this.post.remark,
							picUrls: this.post.picUrls.join(','),
						},
						success: res => {
							const {data} = res
							if(data.code==200){
								uni.hideLoading()
								uni.showModal({
									showCancel: false,
									title:'提交',
									content: '提交工单成功，请等待' + (this.source==1?'用户评价！':'管理员审核！'),
									success: (res) => {
										if(res.confirm){
											uni.navigateBack({
												delta:2,
											})
										}
									},
								})
							}else if(data.code==500){
								uni.hideLoading()
								uni.showToast({
									icon:'none',
									title: data.message,
								})
							}
						},
						fail: (err) => {console.error(err)},
						complete: () => {}
					});
				}
			}
		},
		methods: {
			chooseImg(evt){
				this.picUrls.push(...evt.tempFilePaths)
			},
			deleteImg(evt){
				this.picUrls.splice(evt, 1)
			},
			submit(){
				if(this.picUrls.length>0){
					uni.showLoading({
						title:'上传图片中...',
						mask:true,
					})
					this.post.picUrls.push(...this.picUrls)
					// 依次循环上传图片集
					for (let i=0;i<this.picUrls.length;i++) {
						const idx = i							// 闭包作用
						const pic = this.picUrls[idx]
						uni.uploadFile({
							header:{
								Authorization: 'Bearer ' + app.globalData.token,
							},
							url: 'https://api.isaim.cn/maintenance/file/upload',
							filePath: pic,
							name: "file",
							formData:{},
							fail:(err)=>{console.error(err)},
							success:(res)=>{
								let data = JSON.parse(res.data)
								console.log(data)
								if(data.code==200){
									const url = data.data
									// 记录下图片的远程地址
									this.post.picUrls[idx] = url
									console.log(url)
									this.uploaded++
								}else if(data.code==500){
									uni.showToast({
										icon:'none',
										title: data.message,
									})
								}
							}
						})
					}
				}else{
					this.uploaded = 0
				}
			},
		}
	}
</script>

<style scoped>
	textarea{
		background-color: white;
		border-radius: 10rpx;
	}
</style>
